import useToastState from "../../settings/ToastGlobalState.ts";
import {useEffect} from "react";


const ToastNotification = () => {


    const message = useToastState((state) => state.toastMessage)

    useEffect(() => {

    }, [message]);

    return (
        <div className="toast align-items-center text-bg-primary border-0 position-fixed bottom-0 mb-2 start-50 translate-middle-x" role="alert"
             aria-live="assertive" aria-atomic="true" id={"liveToast"}>
            <div className="d-flex">
                {
                    message && <div className="toast-body">
                        {message}
                    </div> ||
                    <div className="toast-body">

                        Changes are saved!
                    </div>
                }

                <button type="button" className="btn-close btn-close-white me-2 m-auto"
                        data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    )
}

export default ToastNotification